<template>
  <div class="app-container">
    <div class="statsDataShow">
      <div>
        <p>{{ memberStats.memberTotal }}</p>
        <div class="describe">
          <span>客户总数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">店铺访问用户总数，每个微信用户首次访问您的店铺任意页面即成为您的客户。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ memberStats.newMemberTotal }}</p>
        <div class="describe">
          <span>新客</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">客户状态为“新客”的客户总数，您可以在此页面单独对一个或多个客户设置为新客、老客，也可通过【规则管理】页面设置自动标记新客、老客规则。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ memberStats.oldMemberTotal }}</p>
        <div class="describe">
          <span>老客</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">客户状态为“老客”的客户总数，您可以在此页面单独对一个或多个客户设置为新客、老客，也可通过【规则管理】页面设置自动标记新客、老客规则。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ memberStats.excellentTotal }}</p>
        <div class="describe">
          <span>分享达人</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">已成为您的店铺分享达人的总数，您可与在此页面对一个或多个用户设置分享达人，成为分享达人后即可分享您店铺商品赚取佣金。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ memberStats.orderMemberTotal }}</p>
        <div class="describe">
          <span>下单客户</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">在您店铺下单过商品或活动的用户总数。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ memberStats.distributionMemberTotal }}</p>
        <div class="describe">
          <span>分销客户</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">在您店铺赚取过分销佣金的用户总数。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" width="1em" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <p>{{ memberStats.manualUploadOldMemberTotal }}</p>
        <div class="describe">
          <span>手动上传老客</span>
          <el-button type="text" size="mini" @click="manualUploadOldMemberManage">管理</el-button>
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="客户信息:" prop="memberInfo">
        <el-input
          style="width: 300px"
          v-model="queryParams.memberInfo"
          placeholder="请输入微信昵称或用户id"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="下单信息:" prop="placeOrderInfo">
        <el-input
          style="width: 300px"
          v-model="queryParams.placeOrderInfo"
          placeholder="请输入联系人姓名或联系方式"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="下单情况:" prop="placeOrderType">
        <el-select v-model="queryParams.placeOrderType" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.place_order_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分销情况:" prop="distributionType">
        <el-select v-model="queryParams.distributionType" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.distribution_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="新/老客户:" prop="newOrOldMemberType">
        <el-select v-model="queryParams.newOrOldMemberType" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.new_or_old_member_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邀请达人:" prop="inviteExcellentType">
        <el-select v-model="queryParams.inviteExcellentType" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.invite_excellent_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="timeScreenType">
        <el-select v-model="queryParams.timeScreenType" placeholder="请选择">
          <el-option
            v-for="dict in dict.type.time_screen_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryParams.dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="scanQRCodeAddMember"
        >扫码添加用户</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="uploadOldMember"
        >上传老客户号码</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="setMemberToOld"
        >选中设置老客</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="setMemberToNew"
        >选中设置新客</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"/>
      <el-table-column label="微信信息" width="260">
        <template slot-scope="scope">
          <div class="info-box">
            <div class="img-box">
              <img :src="scope.row.avatarUrl" alt=""/>
            </div>
            <div class="content-box">
              <router-link :to="'/member/info/index/' + scope.row.id" class="link-type link-text">
                <el-tooltip placement="top">
                  <div slot="content">
                    用户昵称：{{ scope.row.nickname }}
                    <br/>
                    用户id：{{ idDesensit(scope.row.wxUserId) }}
                  </div>
                  <div>
                    <div>用户昵称：{{ scope.row.nickname }}</div>
                    <div>用户id：{{ idDesensit(scope.row.wxUserId) }}</div>
                  </div>
                </el-tooltip>
              </router-link>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="交易金额" key="transactionTotalAmount" prop="transactionTotalAmount"/>
      <el-table-column label="交易笔数" key="transactionNumber" prop="transactionNumber"/>
      <el-table-column label="最近交易时间" key="latelyTransactionTime" prop="latelyTransactionTime" width="150">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.latelyTransactionTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近下单信息" width="200">
        <template slot-scope="scope">
          <p style="margin: 0px;">下单姓名：{{ scope.row.latelyOrderName }}</p>
          <p style="margin: 0px;">联系方式：{{ scope.row.latelyOrderMobile }}</p>
        </template>
      </el-table-column>
      <el-table-column label="分销佣金" key="distributionAmount" prop="distributionAmount"/>
      <el-table-column label="分销笔数" key="distributionNumber" prop="distributionNumber"/>
      <el-table-column label="新/老客户" key="newOfOld" prop="newOfOld">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.new_or_old_member_type" :value="scope.row.newOfOld"/>
        </template>
      </el-table-column>
      <el-table-column label="加入时间" key="createTime" prop="createTime" width="150">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width" align="center">
        <template slot-scope="scope">
          <router-link :to="'/member/info/index/' + scope.row.id" class="link-type">
            <el-button type="text">查看详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="二维码添加用户" :visible.sync="scanQRCodeAddOpen" width="600px" append-to-body>
      <p>向您的客户出示二维码，扫描后将自动以下列状态成为您的客户，已经是您的客户将变更为以下新/老客户。</p>
      <div class="scanAdd">
        <div class="scanAdd_left">
          <div>新/老客户</div>
          <div>
            <el-radio v-model="changeMember" label="1" @select="createQRCodeImg">成为新客</el-radio>
            <el-radio v-model="changeMember" label="2" @select="createQRCodeImg">成为老客</el-radio>
          </div>
          <el-button type="primary" size="mini" @click="createQRCodeImg">生成二维码</el-button>
        </div>
        <div class="scanAdd_right">
          <div class="body_qr">
<!--            <vue-qr-->
<!--              ref="qrCode"-->
<!--              :text="qrText"-->
<!--              :callback="qrCodeCallback"-->
<!--              width="150"-->
<!--              height="150"-->
<!--            ></vue-qr>-->
          </div>
          <el-button type="primary" size="mini" @click="downloadQRCodeImg">保存二维码</el-button>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitScanQRCodeAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="批量上传老客户号码" :visible.sync="uploadOldMemberOpen" width="400px" append-to-body>
      <el-input v-model="memberMobiles" type="textarea" rows="10" placeholder="请输入或粘贴老客户手机号，一行一个"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitUploadOldMember">确 定</el-button>
        <el-button size="mini" @click="uploadOldMemberOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="管理老客户号码" :visible.sync="oldMemberMobileOpen" width="700px" append-to-body>
      <el-input
        style="width: 100%"
        v-model="queryMobileParams.keyword"
        placeholder="请输入手机号"
        clearable
        @keyup.enter.native="handleQueryMemberMobile">
        <el-button circle slot="append" icon="el-icon-search" @click="handleQueryMemberMobile"></el-button>
      </el-input>
      <template v-for="(item, index) in oldMemberMobileList">
        <span class="showOldMemberMobileList">
          <span>
            <input v-model="multipleMobile" type="checkbox" :value="item.id"/>
            <label :for="item.id">{{ item.memberMobile }}</label>
          </span>
        </span>
      </template>
      <pagination
        v-show="oldMemberMobileListTotal>0"
        :total="oldMemberMobileListTotal"
        :page.sync="queryMobileParams.pageNum"
        :limit.sync="queryMobileParams.pageSize"
        @pagination="getOldMemberMobileList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitOldMemberMobile">删除选中</el-button>
        <el-button size="mini" @click="oldMemberMobileOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageList,
  setMemberToNewOrOld,
  uploadOldMemberMobile,
  getOldMemberMobileList,
  delMultipleMobile,
  memberStats
} from "@/api/triones/member";
// import VueQr from 'vue-qr'
export default {
  name: "index",
  // components: { VueQr },
  dicts: ['place_order_type','distribution_type','new_or_old_member_type','invite_excellent_type','time_screen_type'],
    data() {
    return {
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        memberInfo: undefined,
        placeOrderInfo: undefined,
        placeOrderType: undefined,
        distributionType: undefined,
        newOrOldMemberType: undefined,
        inviteExcellentType: undefined,
        timeScreenType: 'lately_transaction_time',
        dateRange: []
      },
      total: 0,
      loading: false,
      dataList: [],
      /** 选中数组 */
      ids: [],
      /** 非单个禁用 */
      single: true,
      /** 非多个禁用 */
      multiple: true,
      /** 用户统计 */
      memberStats: {
        memberTotal: 0,
        newMemberTotal: 0,
        oldMemberTotal:0,
        excellentTotal: 0,
        orderMemberTotal: 0,
        distributionMemberTotal: 0,
        manualUploadOldMemberTotal: 0
      },
      scanQRCodeAddOpen: false,
      changeMember: '1',
      qrText: 'www.baidu.com',
      qrCodeUrl: '',
      uploadOldMemberOpen: false,
      memberMobiles: '',
      oldMemberMobileOpen: false,
      oldMemberMobileList: [],
      oldMemberMobileListTotal: 0,
      multipleMobile: [],
      queryMobileParams: {
        keyword: undefined,
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  created() {
    this.getMemberStats();
    this.getList();
  },
  methods: {
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
      this.getMemberStats();
    },
    /** 重置 */
    resetQuery() {
      this.queryParams.dateRange = [];
      this.resetForm("queryForm");
    },
    /** 获取列表 */
    getList() {
      this.loading = true;
      pageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 统计客户 */
    getMemberStats() {
      memberStats(this.queryParams).then(response => {
        this.memberStats = response.data;
      })
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 扫描二维码添加用户 */
    scanQRCodeAddMember() {
      this.scanQRCodeAddOpen = true;
    },
    submitScanQRCodeAdd() {
      this.scanQRCodeAddOpen = false;
    },
    qrCodeCallback (url) {
      this.qrCodeUrl = url
    },
    /** 生成二维码 */
    createQRCodeImg() {
      this.qrText = this.changeMember
    },
    /** 下载二维码 */
    downloadQRCodeImg() {
      let name = new Date().getTime()
      let img = document.createElement('a')
      img.style.display = 'none'
      img.download = name
      img.href = this.qrCodeUrl
      document.body.appendChild(img)
      img.click()
      img.remove()
    },
    /** 上传老客户号码 */
    uploadOldMember() {
      this.memberMobiles = '';
      this.uploadOldMemberOpen = true;
    },
    /** 上传老客户手机号 */
    submitUploadOldMember() {
      if (!this.memberMobiles) {
        return this.$message.error("手机号不能为空");
      }
      let memberMobileList = this.memberMobiles.split('\n');
      const list = {
        memberMobiles: memberMobileList
      }
      uploadOldMemberMobile(list).then(response => {
        this.$message.success("操作成功");
        this.uploadOldMemberOpen = false;
      });
    },
    /** 设置为老客 */
    setMemberToOld() {
      if (this.ids.length === 0) {
        return this.$message.warning("请选择");
      }
      setMemberToNewOrOld(this.ids,2).then(response => {
        this.$message.success("操作成功");
        this.getList();
      });
    },
    /** 设置为新客 */
    setMemberToNew() {
      if (this.ids.length === 0) {
        return this.$message.warning("请选择");
      }
      setMemberToNewOrOld(this.ids,1).then(response => {
        this.$message.success("操作成功");
        this.getList();
      });
    },
    /** 手动上传老客户-管理 */
    manualUploadOldMemberManage() {
      this.memberMobiles = []
      this.queryMobileParams = {
        keyword: undefined,
        pageNum: 1,
        pageSize: 10,
      }
      this.getOldMemberMobileList();
      this.oldMemberMobileOpen = true;
    },
    /** 提交管理老客户手机号 */
    submitOldMemberMobile() {
      if (this.multipleMobile.length === 0) {
        return this.$message.error("请选择");
      }
      delMultipleMobile(this.multipleMobile).then(response => {
        this.$message.success("操作成功");
        this.oldMemberMobileOpen = false;
      });
    },
    /** 获取老客户手机号列表 */
    getOldMemberMobileList() {
      getOldMemberMobileList(this.queryMobileParams).then(response => {
        this.oldMemberMobileList = response.rows;
        this.oldMemberMobileListTotal = response.total;
      });
    },
    /** 检索 */
    handleQueryMemberMobile() {
      this.queryMobileParams.pageNum = 1;
      this.getOldMemberMobileList();
    }
  }
}
</script>

<style lang="scss" scoped>

.link-text {
  align-content: center;
}

.statsDataShow > div {
  > div {
    margin-left: 20px;
  }
  > p {
    font-size: 30px;
    margin: 25px;
  }
}

.describe {
  span {
    font-size: 15px;
    vertical-align : middle;
  }
  svg {
    margin-left: 7px;
    vertical-align : middle;
  }
  button {
    padding: 0 0 0 10px;
  }
}

.tip {
  p {
    width: 300px;
    min-height: 50px;
    height: auto;
    font-size: 14px;
  }
}

.scanAdd {
  display: flex;
  > div {
    width: 50%;
    height: 200px;
  }
  .scanAdd_left {
    padding: 20px 0 20px 0;
    text-align: center;
    > div {
      text-align: center;
    }
    div:nth-last-of-type(1) {
      padding: 25px 0 25px 0;
    }
  }
  .scanAdd_right {
    padding: 20px 0 20px 0;
    align-content: center;
    text-align: center;
    .body_qr {
      text-align: center;
    }
  }
}

.showOldMemberMobileList {
  display:inline-block;
  padding-top: 10px;
  > span {
    padding: 10px;
    font-size: 14px;
  }
}

</style>
